<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left"><h3>订单号：{{order.orderNo}}</h3></div>
      <!--订单信息-->
      <div style="text-align:left">
         <h3><i class="el-icon-s-promotion"></i>基本信息</h3>
      </div>
      <el-table :data="tableOrderInfo" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号"></el-table-column>
        <el-table-column prop="createtime" label="时间" ></el-table-column>
        <el-table-column prop="source" label="来源" ></el-table-column>
        <el-table-column prop="cash" label="订单金额(元)" ></el-table-column>
        <el-table-column prop="logisticsNo" label="物流单号" >
            <template slot-scope="scope">
            <span v-if="scope.row.logisticsNo">{{scope.row.logisticsNo}}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="buyerName" label="客户名称"></el-table-column>
          <el-table-column prop="buyerId" label="客户ID"></el-table-column>
         <el-table-column prop="bak" label="客户备注" ></el-table-column>
        <el-table-column prop="orderStatus" label="状态" >
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus=='NOPAY'">待付款</span>
            <span v-else-if="scope.row.orderStatus=='NOSEND'">待发货</span>
            <span v-else-if="scope.row.orderStatus=='SENDED'">已发货</span>
            <span v-else-if="scope.row.orderStatus=='RECEIVED'">已收货</span>
            <span v-else-if="scope.row.orderStatus=='CLOSEED'">已关闭</span>
            <span v-else-if="scope.row.orderStatus=='DONE'">已完成</span>
            <span v-else-if="scope.row.orderStatus=='REFUND'">退货单</span>
            <span v-else>未知状态</span>
          </template>
        </el-table-column>
      </el-table>
      <!--物流信息-->
      <div style="text-align:left">
         <h3><i class="el-icon-s-promotion"></i>物流信息</h3>
      </div>
       <el-table :data="tableOrderInfo" border style="width: 100%">
        <el-table-column prop="logisticsNo" label="物流单号">
            <template slot-scope="scope">
            <span v-if="scope.row.logisticsNo">{{scope.row.logisticsNo}}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
         <el-table-column prop="name" label="物流名称">
           <template slot-scope="scope">
            <span v-if="scope.row.name">{{scope.row.name}}</span>
            <span v-else>暂无</span>
          </template>
         </el-table-column>
        <el-table-column prop="receivePerson" label="收货人"></el-table-column>
         <el-table-column prop="receivePhone" label="手机号" ></el-table-column>
        <el-table-column prop="receiveAddress" label="地址" > </el-table-column>
      </el-table>

       <!--商品信息-->
      <div style="text-align:left">
         <h3><i class="el-icon-s-promotion"></i>商品信息</h3>
      </div>
       <el-table :data="details" border style="width: 100%" >
        <el-table-column prop="headImage" label="商品图片" >
            <template slot-scope="scope">
                <img width="50" height="50" :src="scope.row.headImage"/>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名"></el-table-column>
        <el-table-column prop="price" label="单价" ></el-table-column>
        <el-table-column prop="buyNumber" label="数量" > </el-table-column>
        <el-table-column prop="kindAttrs" label="属性" > </el-table-column>
        <el-table-column prop="sku" label="货号" > </el-table-column>
         <el-table-column prop="cash" label="小计(元)" > </el-table-column>
      </el-table>

       <!--流水信息-->
      <div style="text-align:left">
         <h3><i class="el-icon-s-promotion"></i>资金流水信息</h3>
      </div>
       <el-table :data="bills" border style="width: 100%" :row-class-name="tableRowClassName" >
        <el-table-column prop="payNo" label="支付单号"></el-table-column>
        <el-table-column prop="refundNo" label="退款单号"></el-table-column>
        <el-table-column prop="memberId" label="客户id"></el-table-column>
        <el-table-column prop="memberName" label="客户昵称"></el-table-column>
        <el-table-column prop="cash" label="金额" ></el-table-column>
        <el-table-column prop="createtime" label="流水时间" > </el-table-column>
        <el-table-column prop="inAccount" label="收款账号" > </el-table-column>
        <el-table-column prop="outAccount" label="支出账号" > </el-table-column>
         <el-table-column prop="payType" label="支付方式" >
             <template slot-scope="scope">
                <span v-if="scope.row.payType=='1'">微信小程序</span>
                <span v-else-if="scope.row.payType=='2'">微信扫描付款</span>
                <span v-else>未知付款</span>
            </template>
          </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { orderDetail } from "@/libs/api.js";
export default {
  methods: {
      tableRowClassName({row, rowIndex}) {
        if (row.refundNo) {
          return 'warning-row';
        } 
        return '';
      }

  },

  mounted() {
    if (this.$route.query.id) {
      orderDetail(this.$route.query.id).then(res => {
        this.order = res.order;
        this.details = res.details;
        this.tableOrderInfo.push(this.order);
        this.bills=res.bills;
      });
    }
  },

  data() {
    return {
      order: "",
      details: [],
      tableOrderInfo: [],
      bills:[]
    };
  }
};
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>